<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>{{title}}</h2>
        </div>

        <div class='u-content mn flex flex-column flex-center'>
            <div class='item'>
                <label class='tip' for="">姓名</label>
                <el-input class='f-w300' v-model="name" placeholder="姓名"></el-input>
            </div>
            <div class='item'>
                <label class='tip' for="">照片</label>
                <div class='f-w300'>
                  <div class="u-upload">
                    <input
                      type="file"
                      @change="upfile"
                      name="file"
                      id="file"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      class="u-upload-file"
                    >
                    <label for="file" class="btn btn-success">
                      <img v-if="picUrl" :src="picUrl" alt="">
                      <i class='el-icon-plus' v-else></i>
                    </label>
                  </div>
                </div>
            </div>
            <div class='item'>
                <label class='tip' for="">律师证编号</label>
                <el-input class='f-w300' v-model="licenseNo" placeholder="律师证编号"></el-input>
            </div>
            <div class='item'>
                <label class='tip' for="">教育背景</label>
                <el-input class='f-w300' v-model="education" placeholder="教育背景"></el-input>
            </div>
            <div class='item'>
                <label for="">优势</label>
                <el-input class='f-w300' type="textarea" :rows="4" v-model="advantage" placeholder="优势"></el-input>
            </div>
            <div class='item'>
                <label for="">简介</label>
                <el-input class='f-w300' type="textarea" :rows="4" v-model="desc" placeholder="简介"></el-input>
            </div>
            <div class='btn-box f-ptp20'>
                <el-button
                    class='f-w300 s-bg-green s-cfff'
                    @click="submit">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'AddExpert',
  data() {
    return {
      title: '新增专家',
      id: null,  // 专家id
      name: '',
      licenseNo: '', //律师证编号
      education: '', //教育背景
      advantage: '', //优势
      desc: '',      //简介
      picUrl: '',
    }
  },
  created() {
    if(this.$route.params.id) {
      this.id = this.$route.params.id;
      this.title = '编辑专家';
      this.getExpertById( this.$route.params.id);
    }
  },
  methods: {
    // 上传图片
    upfile(e) {
      const files = e.target.files;
      console.log("files:::", files);
      console.log("files[0]:::", files[0]);
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "expert");
      form.append("type", "1");
   
      this.$store.dispatch("UPLOAD_FILE", form).then(res => {
        console.log("res::::up:::", res);
        if(res.data.retCode == 0) {
          this.$message.success('上传成功！');
          this.picUrl = res.data.data;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      });
    },
    // 获取专家详情
    getExpertById(expertId) {
      this.$store.dispatch('GET_EXPERT_DETAIL', {
        id: expertId
      }).then(res => {
        if(res.data.retCode == 0) {
          console.log('res:::::expertInfo', res);
          const expert = res.data.data;
          this.name = expert.name;
          this.licenseNo = expert.licenseNo;
          this.desc = expert.desc;
          this.advantage = expert.advantage;
          this.education = expert.education;
          this.picUrl = expert.pic;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 确定按钮点击事件
    submit() {
      if(this._utils.isEmpty(this.name)) {
        this.$message.warning('请输入姓名！');
        return;
      }
      if(this._utils.isEmpty(this.picUrl)) {
        this.$message.warning('请上传专家图片！');
        return;
      }
      if(this._utils.isEmpty(this.licenseNo)) {
        this.$message.warning('请输入律师证编号！');
        return;
      }
      if(this._utils.isEmpty(this.education)) {
        this.$message.warning('请输入教育背景！');
        return;
      }
      this.handleExpert();
    },
    // 新建/更新
    handleExpert() {
      this.$store.dispatch('HANDLE_EXPERT', {
        id: this.id,
        name: this.name,
        pic: this.picUrl,
        licenseNo: this.licenseNo,
        education: this.education,
        advantage: this.advantage,
        desc: this.desc
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('提交成功！');
          this.$router.push('/home/team');
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  width: 560px;
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 80px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.tip::before{
    content: '*';
    line-height: 40px;
    color: red;
    margin-right: 5px;
}
.btn-box{
    padding-left: 80px;
}
</style>
